<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生成绩管理系统</title>
	<script>
		function refresh(){
			xhttp.onreadystatechange = function (){
				if (this.readyState == 4 && this.status == 200) {
					procQueryResponse(this.responseText);
				}
			};
			xhttp.open("GET","/students",true);
			xhttp.setRequestHeader('Accept','application/json');
			xhttp.send();
		}

		function procQueryResponse(responseText){
			const obj = JSON.parse(responseText);
			if (obj.success){
				const tblBody= document.getElementById('students');
				tblBody.innerHTML = '';
				for (let student of obj.data){
					const tr = document.createElement('tr');
					const td = document.createElement('td');
					td.innerText = student.id;
					const td2 = document.createElement('td');
					td2.innerText = student.name;
					const td3 = document.createElement('td');
					td3.innerText = student.sex;
					const td4 = document.createElement('td');
					td4.innerText = student.classname;
					const td5 = document.createElement('td');
					const iptDel = document.createElement('input');
					iptDel.type = 'button';
					iptDel.value = '删除';
					iptDel.addEventListener('click',function (){
						onDelete(student);
						return false;
					});
					const iptUpdate = document.createElement('input');
					iptUpdate.type = 'button';
					iptUpdate.value = '修改';
					iptUpdate.addEventListener('click',function (){
						update(student);
						return false;
					});
					td5.appendChild(iptDel);
					td5.appendChild(iptUpdate);
					tr.appendChild(td);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tblBody.appendChild(tr);
				}
			}
		}

		function onDelete(student){
			console.log('删除中...');
			console.log(student);
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) {
					const obj = JSON.parse(this.responseText);
					console.log(obj);
					if (obj.success) {
						alert('删除成功！');
						refresh();
					}else{
						alert('删除失败！');
					}
				}
			}
			xhttp.open("POST","/student/delete?id=" + student.id, true);
			xhttp.setRequestHeader('Accept','application/json');
			xhttp.send();
		}

		function add(){
			const iptName = document.getElementById('iptName');
			const iptSex = document.getElementById('iptSex');
			const iptClassname = document.getElementById('iptClassname');
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) {
					const obj = JSON.parse(this.responseText);
					console.log(obj);
					if (obj.success) {
						alert('添加成功！');
						refresh();
					}else{
						alert('添加失败！');
					}
				}
			}
			xhttp.open("POST","/student/add?name=" + iptName.value + '&sex=' + iptSex.value + '&classname=' + iptClassname.value ,true);
			xhttp.setRequestHeader('Accept','application/json');
			xhttp.send();
		}

		function update(student){
			console.log('更新中...');
			const iptName = document.getElementById('iptName');
			const iptId = document.getElementById('iptId');
			const iptSex = document.getElementById('iptSex');
			const iptClassname = document.getElementById('iptClassname');
			iptId.value = student.id;
			iptName.value = student.name;
			iptSex.value = student.sex;
			iptClassname.value = student.className;
		}

		function onUpdate(){
			const iptName = document.getElementById('iptName');
			const iptSex = document.getElementById('iptSex');
			const iptId = document.getElementById('iptId');
			const iptClassname = document.getElementById('iptClassname');
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) {
					const obj = JSON.parse(this.responseText);
					console.log(obj);
					if (obj.success) {
						alert('修改成功！');
						refresh();
					}else{
						alert('修改失败！');
					}
				}
			}
			xhttp.open("PUT","/student/update?name=" + iptName.value + '&sex=' + iptSex.value + '&id=' + iptId.value + '&classname=' + iptClassname.value,true);
			xhttp.setRequestHeader('Accept','application/json');
			xhttp.send();

		}

		function getById(){
			const  iptId  =document.getElementById('iptId');
			xhttp.onreadystatechange = function (){
				if (this.readyState == 4 && this.status == 200) {
					procQueryResponse(this.responseText);
				}
			};
			xhttp.open("GET","/student?id" +
					"=" + iptId.value,true);
			xhttp.setRequestHeader('Accept','application/json');
			xhttp.send();

		}

		var xhttp = new XMLHttpRequest();
		window.onload = function (){
			refresh();
		}
	</script>
	<style>
		div{
			display: inline-block;
		}
		.navbar-nav {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			padding-left: 0;
			margin-bottom: 0;
			list-style: none
		}
		.pr-3, .px-3 {
			padding-right: 1rem !important
		}
		.text-nowrap {
			white-space: nowrap !important
		}
		.nav-link {
			display: block;
			padding: .5rem 1rem;
			width: 10px;
			height: 10px;
			margin-left: 90%;
		}
		.nav-link.disabled {
			color: #6c757d
		}
		.navbar-nav .nav-link:hover {
			color: rgba(237, 194, 236, 1)
		}.navbar-nav .nav-link {
			 padding-right: 0;
			 padding-left: 0
		 }
	</style>
</head>
<body>
<div>
	<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
		<ul class="navbar-nav px-3">
			<li class="nav-item text-nowrap">
				<a class="nav-link" href="dashboard.html">返回</a>
			</li>
		</ul>
		<ul class="navbar-nav px-3">
			<li class="nav-item text-nowrap">
				<a class="nav-link" href="login.html">退出</a>
			</li>
		</ul>
	</nav>
	<form>

		<table style="width: 100%";>
			<thead>
			<tr>
				<th>学生信息管理</th>
			</tr>
			</thead>
		</table>

		<div>
			<label for="iptId">学生学号</label>
			<input id="iptId" type="text" placeholder="输入学生学号" name="id">
		</div>
		&nbsp;
		<div>
			<label for="iptName">学生姓名</label>
			<input id="iptName" type="text" placeholder="输入学生姓名" name="name">
		</div>
		&nbsp;
		<div>
			<label for="iptSex">学生性别</label>
			<input id="iptSex" type="text" placeholder="输入学生性别" name="sex">
		</div>
		&nbsp;
		<div>
			<label for="iptClassname">学生班级</label>
			<input id="iptClassname" type="text" placeholder="输入学生班级" name="classname">
		</div>
	</form>
	<input type="button" value="添加" onclick="add();">
	&nbsp;
	<input type="button" value="刷新" onclick="refresh()">
	&nbsp;
	<input type="button" value="查询" onclick="getById()">
	&nbsp;
	<input type="button" value="确认修改" onclick="onUpdate()">
	<table>
		<thead>
		<tr>
			<th>学生学号</th>
			<th>学生姓名</th>
			<th>学生性别</th>
			<th>学生班级</th>
		</tr>
		</thead>
		<tbody id="students">
		</tbody>
	</table>
</div>
</body>
</html>
